import React, { useEffect, useState, useRef } from 'react';
import { Button, Select, Pagination, Form, Input, Modal, message } from 'antd';
import SellTable from './components/SellTable';
import LeaseTable from './components/LeaseTable';
import api from '../../../../api';
import { useMappedState, useDispatch } from 'redux-react-hook';
import {
    set_addVisible,
    set_delVisible,
    set_delId,
    set_modalTitle,
    set_modalForm,
    set_brokerVisible
} from '../../../../store/action/house';
import AddHouse from './components/AddHouse';
import DelHouse from './components/DelHouse';
import BrokerModal from './components/BrokerModal';

import './index.css'

const { Option } = Select;

const House = () => {
    const state = useMappedState((state) => state.houseReducer);
    const dispatch = useDispatch();
    // 获取元素内容
    const form = useRef<any>(null);
    // 变量
    // 房源列表
    const [houseList, setHouseList] = useState<any>([]);
    // 模式
    const [mode, setMode] = useState<string>('销售楼盘');
    // 页码
    const [pageIndex, setPageIndex] = useState<number>(1);
    // 每页的数量
    const [pageSize, setPageSize] = useState<number>(5);
    // 总数
    const [total, setTotal] = useState<number>(0);
    // 省份列表
    const [provinceList, setProvinceList] = useState<any>([]);
    // 城市列表
    const [cityList, setCityList] = useState<any>([]);
    // 区县列表
    const [countyList, setCountyList] = useState<any>([]);
    // 当前选择区域
    const [area, setArea] = useState<string>('');
    // 搜索框的内容
    const [searchInput,setSearchInput] = useState<string>('');
    // 生命周期
    useEffect(() => {
        getProvinceList();
    }, []);
    // 监听状态的变化
    useEffect(() => {
        getHouseList();
    }, [mode, pageIndex])
    // 方法
    // 选择县之后
    const provinceChange = (value: any, option: any) => {
        // 修改当前选择的区域
        setArea(option.children);
        // 调用获取城市列表
        getCityList(value);
    }
    // 选择城市之后
    const cityChange = (value: any, option: any) => {
        // 修改当前选择的区域
        setArea(area + option.children);
        // 调用获取区县列表
        getCountyList(value)
    }
    // 选择区县之后
    const countyChange = (value: any, option: any) => {
        // 修改当前选择的区域
        setArea(area + option.children);
    }
    // 获取房源列表
    const getHouseList = () => {
        api.getHouseList({
            mode,
            pageIndex,
            pageSize,
            area,
            building:searchInput
        }).then((res: any) => {
            if (res.success) {
                setHouseList([...res.data.data])
                // 设置总数
                setTotal(res.data.total)
            }
        })
    };
    // 获取省份列表
    const getProvinceList = () => {
        api.getProvinceList().then((res: any) => {
            setProvinceList([...res.data]);
        })
    }
    // 获取城市列表
    const getCityList = (id: number) => {
        api.getCityList({
            pid: id
        }).then((res: any) => {
            setCityList([...res.data]);
        })
    }
    // 获取区县列表
    const getCountyList = (id: number) => {
        api.getCountyList({
            pid: id
        }).then((res: any) => {
            setCountyList([...res.data]);
        })
    }
    // 模式切换
    const modeChange = (str: string) => {
        // 让页码重置
        setPageIndex(1)
        setMode(str)
    }
    // 页码改变
    const pageChange = (num: number) => {
        setPageIndex(num);
    }
    // 点击搜索按钮
    const search = () => {
        // 让页码重置
        setPageIndex(1)
        // 重新获取列表
        getHouseList()
        // 清空表单
        form.current.resetFields()
    }
    // 点击重置按钮
    const reset = () => {
        // 重置地区
        setArea('');
        // 重置搜索框内容
        setSearchInput('');
    }
    // 删除
    const delHouse = (id: string) => {
        dispatch(set_delVisible(true))
        // 把id存储起来
        dispatch(set_delId(id));
    }
    // 点击新增
    const addHouse = () => {
        dispatch(set_addVisible(true));
        dispatch(set_modalTitle('新增'));
    }
    // 点击编辑
    const editHouse = (item: any) => {
        dispatch(set_addVisible(true));
        dispatch(set_modalTitle('编辑'));
        dispatch(set_modalForm(item));
    };
    // 点击指派经纪人
    const broker = (id: string) => {
        dispatch(set_delId(id))
        dispatch(set_brokerVisible(true));
    }
    // 输入内容时
    const valueChange = (e:any) => {
        setSearchInput(e.target.value)
    }
    return (
        <div className="house">
            <div className="header-house">
                房源管理
            </div>
            <div className="wrapper-house">
                {/*  */}
                <div className="button-house">
                    <Button className={mode === '销售楼盘' ? 'active' : ""}
                        onClick={() => { modeChange('销售楼盘') }}
                    >销售楼盘</Button>
                    <Button className={mode === '房屋租赁' ? 'active' : ""}
                        onClick={() => { modeChange('房屋租赁') }}
                    >房屋租赁</Button>
                </div>
                {/*  */}
                <div className="search-house">
                    <Form
                        layout="horizontal"
                        ref={form}
                    >
                        <Form.Item name="province" initialValue="请选择省份">
                            <Select style={{ width: 200 }} onChange={provinceChange}
                            >
                                {provinceList[0] && provinceList.map((item: any) => {
                                    return <Option value={item.id} key={item.id}>{item.ext_name || item.name}</Option>
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="city" initialValue="请选择城市">
                            <Select style={{ width: 200 }} onChange={cityChange}
                            >
                                {cityList[0] && cityList.map((item: any) => {
                                    return <Option value={item.id} key={item.id}>{item.ext_name}</Option>
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item name="county" initialValue="请选择区县">
                            <Select style={{ width: 200 }} onChange={countyChange}>
                                {countyList[0] && countyList.map((item: any) => {
                                    return <Option value={item.id} key={item.id}>{item.ext_name}</Option>
                                })}
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Input placeholder='请输入搜索内容' value={searchInput} 
                            onChange={(e)=>{valueChange(e)}}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                onClick={reset}
                            >重置</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary"
                                onClick={search}
                            >搜索</Button>
                        </Form.Item>
                    </Form>
                </div>
                {/*  */}
                <button className='add-house'
                    onClick={() => { addHouse() }}
                >新增</button>
                {/*  */}
                <div className="table-house">
                    {
                        mode === '销售楼盘' ? <SellTable dataSource={houseList}
                            delHouse={(id: string) => { delHouse(id) }}
                            editHouse={(item: any) => { editHouse(item) }}
                            broker={(id: string) => { broker(id) }}
                        /> : <LeaseTable dataSource={houseList}
                            getHouseList={getHouseList}
                        />
                    }
                </div>
                {/*  */}
                <div className="pag-house">
                    <Pagination current={pageIndex} total={total} pageSize={pageSize} onChange={pageChange} />
                </div>
                {/*  */}
                <DelHouse
                    getHouseList={() => { getHouseList() }}
                ></DelHouse>
                {/*  */}
                <AddHouse
                    getHouseList={() => { getHouseList() }}
                ></AddHouse>
                {/*  */}
                <BrokerModal
                    getHouseList={() => { getHouseList() }}
                ></BrokerModal>
            </div>
        </div>
    )
};

export default House